<template>
  <div class="vue-use">
    <h2>VueUse.vue常见用法</h2>
    <button @click="$router.push('/')">返回首页</button>
    <ul>
      <li>
        <router-link exact-active-class="g-color" to="/vueuse/useRefHistory">useRefHistory 跟踪响应式数据的变化</router-link>
      </li>
      <li>
        <router-link exact-active-class="g-color" to="/vueuse/useVModel">useVModel 简化v-model的绑定</router-link>
      </li>
      <li>
        <router-link exact-active-class="g-color" to="/vueuse/useTemplateRefsList">useTemplateRefsList
          将refs绑定到v-for中模板和组件的简写
        </router-link>
      </li>

    </ul>

    <hr>

    <!-- 三级路由 -->
    <router-view></router-view>
  </div>


</template>

<script>
import printRouter from "../util/use-router";
import {useRoute} from "vue-router";
import {ref} from "vue";
import Vrouter from '../router'

export default {
  name: "VueUse",
  setup() {

    // printRouter()
    const log = ref(0)

    const timer = setInterval(() => {
      // const route = useRoute(); // undefined
      const route = Vrouter.currentRoute.value

      log.value++
      if (log.value > 10) {
        window.clearInterval(timer)
      }
      // {fullPath: '/vueuse', path: '/vueuse', query: {…}, hash: '', name: undefined, …}
      console.log(route)
    }, 2000)


    return {}
  }
}
</script>

<style lang="less" scoped>
.vue-use {

  ul {

    li {
      a {
        &:hover {
          color: #42b983;
        }
      }
    }
  }
}
</style>
